<template>
	<view class="container">
		<view class="idcard-item">
			<view class="idcard-tip">拍摄二代身份证原件，请保持图片清晰，四角完整</view>
			<view class="idcard-img-item">
				<view class="idcard-img-box">
					<image src="../../static/img/idcard1.png"></image>
				</view>
				<view class="idcard-img-tip">*请用手机横屏拍摄</view>
				<tui-upload class="upload-wrap"
				:limit="limit"
				:useType="'idCard'"
				:serverUrl="serverUrl"
				@complete="getImgResult($event,'img1')"
				@remove="removeImg($event,'img1')"></tui-upload>
			</view>
			<view class="idcard-img-item">
				<view class="idcard-img-box">
					<image src="../../static/img/idcard2.png"></image>
				</view>
				<view class="idcard-img-tip">*请用手机横屏拍摄</view>
				<tui-upload class="upload-wrap"
				:limit="limit"
				:useType="'idCard'"
				:serverUrl="serverUrl"
				ref="uploadFace"
				@complete="getImgResult($event,'img2')"
				@remove="removeImg($event,'img2')"></tui-upload>
			</view>
			<view class="idcard-img-item">
				<view class="idcard-img-box">
					<image src="../../static/img/idcard3.png"></image>
				</view>
				<view class="idcard-img-tip">*请用手机横屏拍摄</view>
				<tui-upload class="upload-wrap"
				:limit="limit"
				:serverUrl="serverUrl"
				:useType="'idCard'"
				@complete="getImgResult($event,'img3')"
				@remove="removeImg($event,'img3')"></tui-upload>
			</view>
		</view>
		<view class="idcard-item idcard-text-wrap">
			<view class="cell row b-b">
				<text class="tit">姓名</text>
				<input class="input" type="text" maxlength="20" v-model="userName" placeholder="请填写您的姓名" placeholder-class="placeholder" />
			</view>
			<view class="cell row b-b">
				<text class="tit">身份证</text>
				<input class="input" type="text" maxlength="20" v-model="idCard" placeholder="请填写您的身份证" placeholder-class="placeholder" />
			</view>
			<view class="idcard-img-tip">*请仔细确认姓名和身份证，如有错误可能影响审核结果。</view>
		</view>
		<view class="bot-btn-wrap fix-bot">
			<mix-button ref="confirmBtn" text="提交信息" :iconSize="36" :isConfirm="false" @onConfirm="submit"></mix-button>
		</view>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	//实际使用需要传入上传地址，以及上传接口返回数据进行调整组件
	import tuiUpload from '@/components/tui-upload/tui-upload';
	import mixButton from '@/components/mix-button/mix-button.vue'
	export default {
		components: {
			tuiUpload,
			mixButton
		},
		data() {
			return {
				limit:1,
				// serverUrl:'so-fast-drmall/retrievePassword/file/upload',
				serverUrl: 'so-fast-fs/fs/common/aliyunfileNoCheck/upload',//不验证token
				userName:'',
				idCard:'',
				emblemFaceAddr:'',//国徽面
				portraitFaceAddr:'',//人像面
				selfPortraitAddr:'',//自拍照
				agencyId:'',
				phoneNum:''
			}
		},
		onLoad(options) {
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
			if(options){
				this.agencyId=options.agencyId
				this.phoneNum=options.phoneNum
			}
		},
		methods: {
			getImgResult: function(e,type) {
				console.log(e);
				if(type==="img1"){
					this.emblemFaceAddr=e.imgArr[0];
				}else if(type==="img2"){
					let that=this;
					// this.portraitFaceAddr=e.imgArr[0];
					if(e.status==1&&e.imgArr&&e.imgArr.length>0){
						let params={
							idCard:e.imgArr[0],
						}
						this.$http.idCardInfoRead(params).then((res) => {
							//0:微信人像面身份验证成功
	                            if (res.data && res.data.errcode == '0') {
	                                this.userName=res.data.name;
									this.idCard=res.data.id;
									this.portraitFaceAddr=e.imgArr[0];
	                            } else {
									this.$util.msg('识别失败，请按照指定格式上传');
	                                this.portraitFaceAddr='';
									this.$refs.uploadFace.removeOneImage();
	                            }
							
						})
					}
					
				}else if(type==="img3"){
					this.selfPortraitAddr=e.imgArr[0];
				}
			},
			removeImg: function(e,type) {
				//移除图片
				console.log(e)
				if(type==="img1"){
					this.emblemFaceAddr='';
				}else if(type==="img2"){
					this.portraitFaceAddr='';
				}else if(type==="img3"){
					this.selfPortraitAddr='';
				}
			},
			submit(){
				
				if(!this.emblemFaceAddr){
					this.$util.msg('请上传国徽面照片');
					this.$refs.confirmBtn.stop();
					return;
				}
				if(!this.portraitFaceAddr){
					this.$util.msg('请上传人像面照片');
					this.$refs.confirmBtn.stop();
					return;
				}
				if(!this.selfPortraitAddr){
					this.$util.msg('请上传自拍照');
					this.$refs.confirmBtn.stop();
					return;
				}
				if(!this.userName){
					this.$util.msg('请填写您的姓名');
					this.$refs.confirmBtn.stop();
					return;
				}
				if(!this.$util.checkStr(this.idCard, 'card')){
					this.$util.msg('请输入正确的身份证号');
					this.$refs.confirmBtn.stop();
					return;
				}
				
				let params={
					agencyId:this.agencyId,
					phoneNum:this.phoneNum,
					userName:this.userName,
					idCard:this.idCard,
					portraitFaceAddr:this.portraitFaceAddr,
					emblemFaceAddr:this.emblemFaceAddr,
					selfPortraitAddr:this.selfPortraitAddr,
				}
				this.$http.idCardInfoUpload(params).then((res) => {
					if(res.status === 0) {
						this.navTo('/packageA/pages/IDCardUpload/IDCardSuccess');
					}
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">
.container{
	// padding-bottom: 120rpx;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
		
}
.idcard-item{
	background-color: #fff;
	margin:20rpx 0;
	width: 100%;
	box-sizing: border-box;
	padding:30rpx 40rpx;
	
	.cell{
		height: 106rpx;
		
		.tit{
			min-width: 140rpx;
			font-size: 28rpx;
			color: #111111;
		}
		.input{
			flex: 1;
			font-size: 30rpx;
			color: #333;
		}
		.icon-you{
			flex-shrink: 0;
			margin-right: 8rpx;
			margin-left: 40rpx;
			font-size: 24rpx;
			color: #aaa;
		}
		switch{
			transform: scale(0.8) translateX(10rpx);
			transform-origin: center right;
		}
	}
}
.idcard-tip{
	font-size: 26rpx;
	color: #ccc;
	margin-bottom: 20rpx;
}
.idcard-img-item{
	width: 100%;
	position: relative;
	.idcard-img-box{
		border-radius: 16rpx;
		border:2rpx solid #eee;
		box-shadow: 0 0 12rpx #eee;
		width:94%;
		height: 380rpx;
		margin:0 auto;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
			display: block;
		}
	}
	
	
	.upload-wrap{
		position: absolute;
		left:4%;
		top:0;
		width:94%;
		height: 380rpx;
	}
}
.idcard-img-tip{
		text-align: right;
		color:#EA655E;
		font-size: 26rpx;
		line-height:60rpx;
	}
.idcard-text-wrap{
	margin-top:0rpx;
	padding-top:5rpx;
	.idcard-img-tip{
		text-align:left;
		padding-top:10rpx;
	}
}
</style>
